<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>活动管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" th:href="@{/css/mui.min.css}">
    <!--App自定义的css-->
    <link rel="stylesheet" th:href="@{/css/app.css}"/>
    <style>
        .mui-li {
            padding-left: 15px !important;
        }

        .li-span {
            width: 30%;
            float: right;
        }

        .btn {
            border-radius: 40px;
            border: 1px solid gainsboro;
        }
    </style>
</head>

<body>

<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active" href="#tabbar">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <!-- 	<a class="mui-tab-item" href="#tabbar-with-contact">
        <span class="mui-icon mui-icon mui-icon-flag"></span>
        <span class="mui-tab-label">活动</span>
    </a> -->
    <a class="mui-tab-item" href="#tabbar-with-chat">
        <span class="mui-icon mui-icon mui-icon-chatbubble"></span>
        <span class="mui-tab-label">消息</span>
    </a>

    <a class="mui-tab-item" href="#tabbar-with-map">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>

<div class="mui-content">
    <div id="tabbar" class="mui-control-content mui-active">
        <!-- 轮播 -->
        <div class="mui-card">
            <div id="slider" class="mui-slider">
                <div class="mui-slider-group mui-slider-loop">
                    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="../images/h1.png">
                        </a>
                    </div>
                    <!-- 第一张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../images/h2.png">
                        </a>
                    </div>
                    <!-- 第二张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../images/h3.png">
                        </a>
                    </div>
                    <!-- 第三张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../images/h4.png">
                        </a>
                    </div>
                    <!-- 第四张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../images/h5.png">
                        </a>
                    </div>
                    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="../images/h1.png">
                        </a>
                    </div>
                </div>
                <div class="mui-slider-indicator">
                    <div class="mui-indicator mui-active"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                </div>
            </div>
        </div>

        <!--按钮区域-->
        <div class="mui-card">
            <ul class="mui-table-view mui-grid-view mui-grid-9" style="background-color: white;">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 ">
                    <a href="/app/list/3" class="btn">
                        <span class="mui-icon mui-icon-home"></span>
                        <div class="mui-media-body">报名</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 ">
                    <a href="/app/list/4" class="btn">
						<span class="mui-icon mui-icon-email">
									<!-- <span class="mui-badge">5</span> --></span>
                        <div class="mui-media-body">比赛</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 ">
                    <a href="/app/wenjuan" class="btn">
                        <span class="mui-icon mui-icon-compose"></span>
                        <div class="mui-media-body">问卷</div>
                    </a>
                </li>
            </ul>
        </div>

        <!-- 排名区域 -->
        <div class="mui-card">
            <div class="mui-card" th:each="item,state:${list}" th:if="${state.index < 3}">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <img th:src="${item.coverImage}" alt="" width="100%"/>
                        <th:block th:text="${item.title}"></th:block>
                    </div>
                    <div class="mui-card-footer">
                        <a class="mui-card-link">浏览：
                            <th:block th:text="${item.hit}"></th:block>
                        </a>
                        <a class="mui-card-link">点赞：
                            <th:block th:text="${item.upVote}"></th:block>
                        </a>
                        <a class="mui-card-link" th:href="'/app/detail/'+${item.id}">详情...</a>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!--消息-->
    <div id="tabbar-with-chat" class="mui-control-content">
        <ul class="mui-table-view mui-table-view-chevron">
            <th:block th:each="notice:${notices}">
                <div th:text="${#dates.format(notice.createTime,'yyyy-MM-dd')}" style="margin-left: 15px"></div>
                <li class="mui-table-view-cell mui-collapse">
                    <a class="mui-navigate-right" th:text="${notice.noticeTitle}" style="font-size: 10px"></a>
                    <div class="mui-collapse-content" style="width: 130%">
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell">
                                <span th:text="${notice.noticeContent}"></span>
                            </li>

                        </ul>

                    </div>
                </li>
            </th:block>
        </ul>
    </div>

    <!--我的-->
    <div id="tabbar-with-map" class="mui-control-content">

        <div class="mui-card">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <span class="mui-icon iconfont icon-phone"></span>
                    <img src="../images/logo.png" style="width: 65px;"/>
                </li>
                <li class="mui-table-view-cell">
                    <span class="mui-icon iconfont icon-phone"></span>
                    学号
                    <span class="mui-pull-right" th:text="${user.stuNo}">201811</span>
                </li>
                <li class="mui-table-view-cell">
                    <span class="mui-icon iconfont icon-shouji"></span>
                    姓名
                    <span class="mui-pull-right" th:text="${user.name}">张无忌</span>
                </li>
                <li class="mui-table-view-cell">
                    <span class="mui-icon iconfont icon-weixin"></span>
                    专业
                    <span class="mui-pull-right" th:text="${user.zYe}">计算机</span>
                </li>
            </ul>

        </div>
        <div class="mui-card">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-collapse">
                    <a class="mui-navigate-right" href="#">我的点赞</a>
                    <div class="mui-collapse-content">
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell mui-li" th:each="dzItem:${dzList}">
                                <span th:text="${dzItem.extra1}"></span>
                                <span class="li-span" th:text="'点赞：'+${dzItem.extra2}">

                                </span>
                            </li>
                        </ul>

                    </div>
                </li>

                <li class="mui-table-view-cell mui-collapse">
                    <a class="mui-navigate-right" href="#">我的报名</a>
                    <div class="mui-collapse-content">
                        <ul class="mui-table-view mui-li" th:each="bmItem:${bmList}">
                            <li class="mui-table-view-cell" style="font-size:10px">
                                <span th:text="${#strings.substring(bmItem.extra1,0,10)}"></span>
                                <span class="li-span"><a th:onclick="clickQd([[${bmItem.id}]],[[${bmItem.type}]])"
                                                         th:text="${bmItem.extra2}" th:id="${bmItem.id}"></a></span>
                            </li>
                        </ul>

                    </div>
                </li>
                <li class="mui-table-view-cell mui-collapse">
                    <a class="mui-navigate-right" href="#">我的评论</a>
                    <div class="mui-collapse-content">
                        <div class="mui-card">
                            <ul class="mui-table-view">
                                <li class="mui-table-view-cell" style="font-size:10px" th:each="item:${commentList}">
                                    <th:block th:text="${item.address}"></th:block>
                                </li>
                                <!-- <li class="mui-table-view-cell" th:each="item:${commentList}" style="font-size: 10px">
                                     评论：
                                     <th:block th:text="${item.content}"></th:block>
                                 </li>-->
                                <!--<li class="mui-table-view-cell">
                                    【青春杯羽毛球赛】我的评论：那个人好帅....
                                </li>-->
                            </ul>
                        </div>

                    </div>
                </li>
            </ul>

        </div>
    </div>

</div>
</body>
<script th:src="@{/js/mui.min.js}"></script>
<script th:src="@{/js/jquery-1.8.3.min.js}"></script>
<script th:src="@{/js/app.js}"></script>
<script>
    function clickQd(id, val) {
        if (val == 0) {
            var url = "/appArticleMine/upArticleMine";
            post(url, {id: id}, function (result) {
                if (result.code == 0) {
                    $("#" + id).text("已签到");
                }
            })
        }
    }
</script>
</html>
